<template>
  <div style="position: relative">
    <!--中间显示界面 -->
    <!-- {{ selectWidget.key }}------- -->
    <a-form-item
      class="widget-view"
      style="border: none; padding: 7px 0px"
      v-if="element && element.key"
      :class="{
        active: selectWidget.key == element.key,
      }"
      :required="element.options.required"
      :label="element.name"
      @click.enter.stop="handleSelectWidget(index)"
      @dblclick.enter.stop="openSettingModel()"
    >
      <template v-if="element.type == 'input'">
        <Finput :setting="element" :fieldState="0" :formType="1"></Finput>
      </template>
      <template v-else-if="element.type == 'select'">
        <Fselect :setting="element" :fieldState="0" :formType="1"></Fselect>
      </template>
      <template v-else-if="element.type == 'date'">
        <Fdate :setting="element" :fieldState="0" :formType="1"></Fdate>
      </template>
      <template v-else-if="element.type == 'number'">
        <Fnumber :setting="element" :fieldState="0" :formType="1"></Fnumber>
      </template>
      <template v-else-if="element.type == 'radio'">
        <Fradio :setting="element" :fieldState="0" :formType="1"></Fradio>
      </template>
      <template v-else-if="element.type == 'checkbox'">
        <Fcheckbox :setting="element" :fieldState="0" :formType="1"></Fcheckbox>
      </template>
      <template v-else-if="element.type == 'rate'">
        <Frate :setting="element" :fieldState="0" :formType="1"></Frate>
      </template>
      <template v-else-if="element.type == 'switch'">
        <Fswitch :setting="element" :fieldState="0" :formType="1"></Fswitch>
      </template>
      <template v-else-if="element.type == 'slider'">
        <Fslider :setting="element" :fieldState="0" :formType="1"></Fslider>
      </template>
      <template v-else-if="element.type == 'text'">
        {{ element.options.defaultValue }}
      </template>
      <template v-else-if="element.type == 'imgupload'">
        <FuploadImg
          :setting="element"
          :fieldState="0"
          :formType="1"
        ></FuploadImg>
      </template>
      <template v-else-if="element.type == 'fileupload'">
        <FuploadFile
          :setting="element"
          :fieldState="0"
          :formType="1"
        ></FuploadFile>
      </template>
      <template v-else-if="element.type == 'table'">
        <Ftable :setting="element" :fieldState="0" :formType="1"></Ftable>
      </template>
    </a-form-item>
    <div class="widget-view-drag" v-if="selectWidget.key == element.key">
      <DragOutlined />
    </div>
    <div class="widget-view-action" v-if="selectWidget.key == element.key">
      <span @click.stop="handleWidgetDelete(index)"><DeleteOutlined /></span>
      <span @click.stop="handleWidgetClone(index)"><CopyOutlined /></span>
    </div>
  </div>
</template>

<script>
  import {
    Finput,
    Fdate,
    Fselect,
    Fnumber,
    Fradio,
    Fcheckbox,
    Frate,
    Fswitch,
    Fslider,
    FuploadImg,
    FuploadFile,
    Ftable,
  } from './formComponents/index'
  import {
    CopyOutlined,
    DeleteOutlined,
    DragOutlined,
  } from '@ant-design/icons-vue'
  import { getGuid } from '@/utils/util'
  export default {
    // eslint-disable-next-line vue/require-prop-types
    props: ['element', 'select', 'index', 'widgetForm'],
    components: {
      Finput,
      Fdate,
      Fselect,
      Fnumber,
      Fradio,
      Fcheckbox,
      Frate,
      Fswitch,
      Fslider,
      FuploadImg,
      FuploadFile,
      Ftable,
      CopyOutlined,
      DeleteOutlined,
      DragOutlined,
    },
    data() {
      return {
        data: this.widgetForm,
        selectWidget: this.select,
      }
    },
    created() {
      console.log('1111')
    },
    methods: {
      handleSelectWidget(index) {
        console.log('点击事件', index, this.selectWidget)
        this.selectWidget = this.data.list[index]
      },
      openSettingModel() {
        this.$emit('openSetting', true)
      },

      handleWidgetDelete(index) {
        if (this.data.list.length - 1 === index) {
          if (index === 0) {
            this.selectWidget = {}
          } else {
            this.selectWidget = this.data.list[index - 1]
          }
        } else {
          this.selectWidget = this.data.list[index + 1]
        }

        this.$nextTick(() => {
          this.data.list.splice(index, 1)
        })
      },
      handleWidgetClone(index) {
        const key = getGuid()
        let cloneData = {
          ...this.data.list[index],
          options: {
            ...this.data.list[index].options,
          },
          key,
        }
        this.data.list.splice(index, 0, cloneData)

        this.$nextTick(() => {
          this.selectWidget = this.data.list[index + 1]
        })
      },
    },
    watch: {
      select(val) {
        this.selectWidget = val
      },
      selectWidget: {
        handler(val) {
          this.$emit('update:select', val)
        },
        deep: true,
      },
    },
  }
</script>
